<template>
    <div>
        <h1>vue3的生命周期</h1>
        <h2>只有卸载前和写载后两个生命周期不一样名字不一样了而已</h2>
        <h2>同时由原来的option变成了组合API的形式</h2>
        <h2>新增了两个调试的钩子函数</h2>
        <h2>vue3完全可以使用vue2的生命周期钩子</h2>
        <h2>3的回调函数要更快</h2>
    </div>
    <button @click="change()">点我</button>
    <hr>
    <keep-alive>
        <Child :style="show?'display:block':'display:none'"></Child>
    </keep-alive>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import Child from "./components/Child-02.vue"

export default defineComponent({
    
    setup() {
        
    },
    
    data(){
        return{
            show:true
        }
    },

    methods:{
        change(){
            console.log(this.show);
            
            this.show =! this.show;
        }
    },

    components:{
        Child
    },


})

</script>
